<template>
<!-- 专家详情页面 -->
<!-- 就一个页面 后期数据渲染 -->
  <div>
    <!-- 头部 -->
    <div class="first">
      <div class="left">
        <div class="top">
          <img  class="avatar" src="https://tdesign.gtimg.com/site/avatar-boy.jpg" alt="">
          <div class="info">
            <div class="name">xxx  xxx  xxx</div>
            <div class="school">xxx xxx</div>
            <div class="personal">xxx xxxx</div>
          </div>
        </div>
        <div class="bottom">
          <ul>
            <li class="other"><span class="num ">1</span><span class="name">服务人次</span></li>
            <li><span class="num">1</span><span class="name">好评率(%)</span></li>
            <li class="other"><span class="num ">1</span><span class="name">同行认可</span></li>
            <li><span class="num">1</span><span class="name">评论</span></li>
          </ul>
        </div>
      </div>
      <!-- 付费 -->
      <a class="pay-icon" href="https://www.chunyuyisheng.com/pc/doctor/clinic_web_e99e560366d27857/">
          <img class="wx" src="https://static.chunyuyisheng.com/@/static/pc/img/seo/doctor-chat@2x_d738b20.png" alt="">
          <div class="word">图文咨询（45/次）</div>
          <hr>
          <div class="buy">立即购买</div>
      </a>
      <!-- 微信公众号 -->
      <div class="weixin">
        <div class="qr-code">
          <img src="https://resource.chunyu.mobi/@/media/images/2018/01/20/_HXmIDeY-R47pfafisP3IXg" alt="">
          <div class="des">
            微信关注该专家
            <br>
            方便随时提问
          </div>
        </div>
        <div class="people">已有123人关注</div>
      </div>
    </div>

    <!-- 介绍 -->
    <!-- 标题 -->
      <div class="title-wrap">
        <h2 class="title-info">专家介绍</h2>
      </div>
    <!-- 内容 -->
    <div class="paragraph">
      <span class="paragraph-title">医学教育背景介绍 :</span>
      宋元涛，男，主治医师，硕士研究生学历，毕业于国内医科大学皮肤病与性病学专业，参加国家级医师规范化培训，天津市第一届皮肤病理学委员会委员，天津市银屑病学会委员，从事儿童皮肤病学的临床和科研工作数年，主要研究方向为皮肤病理学，擅长将最新进展与皮肤相结合从而指导儿童皮肤用药，对儿童常见的湿疹及过敏有很多的造诣。在国内核心期刊发表论文数篇，其中发表的苯丙酮尿症合并淋巴瘤样丘疹病处于国内新发，对于罕见病有很好的研究，对朗格汉斯细胞组织细胞增生症有比较好的研究。
    </div>
    <div class="paragraph">
      <span class="paragraph-title">医学教育背景介绍 :</span>
      宋元涛，男，主治医师，硕士研究生学历，毕业于国内医科大学皮肤病与性病学专业，参加国家级医师规范化培训，天津市第一届皮肤病理学委员会委员，天津市银屑病学会委员，从事儿童皮肤病学的临床和科研工作数年，主要研究方向为皮肤病理学，擅长将最新进展与皮肤相结合从而指导儿童皮肤用药，对儿童常见的湿疹及过敏有很多的造诣。在国内核心期刊发表论文数篇，其中发表的苯丙酮尿症合并淋巴瘤样丘疹病处于国内新发，对于罕见病有很好的研究，对朗格汉斯细胞组织细胞增生症有比较好的研究。
    </div>
    <div class="paragraph">
      <span class="paragraph-title">医学教育背景介绍 :</span>
      宋元涛，男，主治医师，硕士研究生学历，毕业于国内医科大学皮肤病与性病学专业，参加国家级医师规范化培训，天津市第一届皮肤病理学委员会委员，天津市银屑病学会委员，从事儿童皮肤病学的临床和科研工作数年，主要研究方向为皮肤病理学，擅长将最新进展与皮肤相结合从而指导儿童皮肤用药，对儿童常见的湿疹及过敏有很多的造诣。在国内核心期刊发表论文数篇，其中发表的苯丙酮尿症合并淋巴瘤样丘疹病处于国内新发，对于罕见病有很好的研究，对朗格汉斯细胞组织细胞增生症有比较好的研究。
    </div>
    <div class="paragraph">
      <span class="paragraph-title">医学教育背景介绍 :</span>
      宋元涛，男，主治医师，硕士研究生学历，毕业于国内医科大学皮肤病与性病学专业，参加国家级医师规范化培训，天津市第一届皮肤病理学委员会委员，天津市银屑病学会委员，从事儿童皮肤病学的临床和科研工作数年，主要研究方向为皮肤病理学，擅长将最新进展与皮肤相结合从而指导儿童皮肤用药，对儿童常见的湿疹及过敏有很多的造诣。在国内核心期刊发表论文数篇，其中发表的苯丙酮尿症合并淋巴瘤样丘疹病处于国内新发，对于罕见病有很好的研究，对朗格汉斯细胞组织细胞增生症有比较好的研究。
    </div>


    <!-- 评价 -->
    <div class="comments-container">
      <div class="title-wrap">
        <h2 class="title-info">评价列表</h2>
      </div>

      <ul id="comments-list" class="comments-list">
        <li>
          <div class="comment-main-level">
            <!-- Avatar -->
            <div class="comment-avatar"><img src="https://tdesign.gtimg.com/site/avatar.jpg" alt=""></div>
            <!-- Contenedor del Comentario -->
            <div class="comment-box">
              <div class="comment-head">
                <h6 class="comment-name by-author"><a href="http://creaticode.com/blog">Agustin Ortiz</a></h6>
                <span>hace 20 minutos</span>
                <i class="fa fa-reply"></i>
                <i class="fa fa-heart"></i>
              </div>
              <div class="comment-content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
              </div>
            </div>
          </div>
          <!-- Respuestas de los comentarios -->

        </li>

        <li>
          <div class="comment-main-level">
            <!-- Avatar -->
            <div class="comment-avatar"><img src="https://tdesign.gtimg.com/site/avatar.jpg" alt=""></div>
            <!-- Contenedor del Comentario -->
            <div class="comment-box">
              <div class="comment-head">
                <h6 class="comment-name"><a href="http://creaticode.com/blog">Lorena Rojero</a></h6>
                <span>hace 10 minutos</span>
                <i class="fa fa-reply"></i>
                <i class="fa fa-heart"></i>
              </div>
              <div class="comment-content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="comment-main-level">
            <!-- Avatar -->
            <div class="comment-avatar"><img src="https://tdesign.gtimg.com/site/avatar.jpg" alt=""></div>
            <!-- Contenedor del Comentario -->
            <div class="comment-box">
              <div class="comment-head">
                <h6 class="comment-name"><a href="http://creaticode.com/blog">Lorena Rojero</a></h6>
                <span>hace 10 minutos</span>
                <i class="fa fa-reply"></i>
                <i class="fa fa-heart"></i>
              </div>
              <div class="comment-content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="comment-main-level">
            <!-- Avatar -->
            <div class="comment-avatar"><img src="https://tdesign.gtimg.com/site/avatar.jpg" alt=""></div>
            <!-- Contenedor del Comentario -->
            <div class="comment-box">
              <div class="comment-head">
                <h6 class="comment-name"><a href="http://creaticode.com/blog">Lorena Rojero</a></h6>
                <span>hace 10 minutos</span>
                <i class="fa fa-reply"></i>
                <i class="fa fa-heart"></i>
              </div>
              <div class="comment-content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="comment-main-level">
            <!-- Avatar -->
            <div class="comment-avatar"><img src="https://tdesign.gtimg.com/site/avatar.jpg" alt=""></div>
            <!-- Contenedor del Comentario -->
            <div class="comment-box">
              <div class="comment-head">
                <h6 class="comment-name"><a href="http://creaticode.com/blog">Lorena Rojero</a></h6>
                <span>hace 10 minutos</span>
                <i class="fa fa-reply"></i>
                <i class="fa fa-heart"></i>
              </div>
              <div class="comment-content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="comment-main-level">
            <!-- Avatar -->
            <div class="comment-avatar"><img src="https://tdesign.gtimg.com/site/avatar.jpg" alt=""></div>
            <!-- Contenedor del Comentario -->
            <div class="comment-box">
              <div class="comment-head">
                <h6 class="comment-name"><a href="http://creaticode.com/blog">Lorena Rojero</a></h6>
                <span>hace 10 minutos</span>
                <i class="fa fa-reply"></i>
                <i class="fa fa-heart"></i>
              </div>
              <div class="comment-content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="comment-main-level">
            <!-- Avatar -->
            <div class="comment-avatar"><img src="https://tdesign.gtimg.com/site/avatar.jpg" alt=""></div>
            <!-- Contenedor del Comentario -->
            <div class="comment-box">
              <div class="comment-head">
                <h6 class="comment-name"><a href="http://creaticode.com/blog">Lorena Rojero</a></h6>
                <span>hace 10 minutos</span>
                <i class="fa fa-reply"></i>
                <i class="fa fa-heart"></i>
              </div>
              <div class="comment-content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
export default {
  name:'web_1',
  data() {
    return {
      commentsData: [
        {
          id: 'A',
          avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
          author: '评论作者名A',
          datetime: '今天16:38',
          content: '评论作者名A写的评论内容。',
        },
        {
          id: 'B',
          avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
          author: '评论作者名B',
          datetime: '今天16:38',
          content: '评论作者名B写的评论内容。',
        },
        {
          id: 'C',
          avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
          author: '评论作者名C',
          datetime: '今天16:38',
          content: '评论作者名C写的评论内容。',
        },
      ],
    };
  },
}
</script>

<style lang="less" scoped>
.first{
    position: relative;

    margin-top: 25px;
    // margin: 25px 30px;
    padding-top: 25px;
    // padding: 25px 10px;
    height: 100%;
    font-size: 14px;
    background-image: linear-gradient(to left, #4f3d79, #3e477f, #2c5082, #1d5781, #175d7e);
}
// 付费咨询
.first .pay-icon{
  position: absolute;
  top: -9px;
  right: 300px;
  border-radius: 0 0 10% 10%;
  color: #333;
  text-decoration: none;
  display: inline-block;
  width: 140px;
  background-image: linear-gradient(-180deg,#FFD90E 0,#FDB206 100%);
  // height: 100%;
  hr{
    margin: 22px 15px 8px;
    border: 0;
    height: 1px;
    border-color: #E09D05;
    border-top: 1px solid #ccc;
  }
  .word{
    margin-left: 8px;
    font-family: PingFangSC-Medium;
    margin-top: 15px;
    font-size: 14px;
    line-height: 14px;
  }
  .wx{
    margin-top: 35px;
    width: 36px;
    height: 36px;
  }
  .buy{
    font-size: 14px;
    margin-bottom: 10px;
  }
}
// 付费咨询伪类
.first .pay-icon::before,.pay-icon::after{
    content: '';
    position: absolute;
    left: -8px;
    top: -4px;
    display: inline-block;
    border: 6px solid transparent;
    border-right: 10px solid #724F01;
    z-index: -1;
    transform: rotate(90deg);
}
.first .pay-icon::after{
  left: auto;
  right: -8px;
}
// 左边信息
.first .left{
    position: relative;
    // float: left;
    width: 60%;
    margin-left: 60px;
    .top{
      // position: relative;
      height: 100%;
      width: 100%;
      // background-color: #724F01;
      text-align: left;
      display: flex;
      justify-content: start;
      align-items: center;
      .avatar{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        text-align: left;
      }
      .info{
        // float: left;
        height: 100px;
        display: inline-block;
        margin-left: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        color: white;
        .name{
          font-size: 30px;
        }
      }
    }
    .bottom{
      height: 100%;
      margin-top: 10px;
      // height: 63px;
      // background-color: #ccc;
      ul{
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        list-style: none;
        li{
          height: 100%;
          display: inline-block;
          // float: left;
          padding-bottom: 10px;
          width: 25%;
          text-align: center;
          color: white;

          .name{
            display: block;
            padding-top: 5px;
          }
          .num{
            font-size: 30px;
            display: inline-block;
            padding-top: 17px;
          }
        }

      }
      .other{
          background-image: linear-gradient(180deg,#1d5781,#267ea7,);
        }
    }
}
// 关注微信
.first .weixin{
  border-top: 1px solid #25b853;
  position: absolute;
  top: -9px;
  right: 100px;
  width: 160px;


  // text-decoration: none;
  display: inline-block;
  // width: 140px;
  // background-image: linear-gradient(-180deg,#FFD90E 0,#FDB206 100%);
  img{
    padding-top: 10px;
    width: 130px;
    height: 130px;
  }
  .qr-code{
    font-size: 13px;
    color: #666;
    background-color: white;
    border-radius: 0 0 10% 10%;
    .des{
      margin-bottom: 10px;
      padding-bottom: 10px;
    }
  }
  .people{
    color: white;
    // height: 10px;
    line-height: 10px;
    font-size: 16px;
  }
}
.first .weixin::before,.first .weixin::after{
    content: '';
    position: absolute;
    left: -8px;
    top: -4px;
    display: inline-block;
    border: 6px solid transparent;
    border-right: 10px solid #25b853;
    z-index: -1;
    transform: rotate(90deg);
}
.first .weixin::after{
  left: auto;
  right: -8px;
}

.title-wrap{
    position: relative;
    border-left: 4px solid #dca8f5;
    margin: 60px 0;
    height: 22px;
    line-height: 22px;
}
.title-wrap::before{
    content: '';
    display: inline-block;
    border-top: 1px solid #e7e7e7;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
}
.title-info{
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    color: #323232;
    font-size: 20px;
    max-width: 500px;
    height: 22px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    padding-right: 10px;
    padding-left: 7px;
}

.paragraph{
    line-height: 30px;
    font-size: 14px;
    margin-bottom: 10px;
    text-align: left;
    color: #666;
    .paragraph-title{
      font-size: 16px;
      text-align: left;
      color: #323232;
    }
}

.action-text {
  display: inline-block;
  margin-left: 6px;
  line-height: 15px;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }

 a {
  color: #03658c;
  text-decoration: none;
 }

ul {
  list-style-type: none;
}

body {
  font-family: 'Roboto', Arial, Helvetica, Sans-serif, Verdana;
  background: #dee1e3;
}

/** ====================
 * Lista de Comentarios
 =======================*/
.comments-container {
  // margin: 60px auto 15px;
  width: 100%;
}

// .comments-container h1 {
//   font-size: 36px;
//   color: #283035;
//   font-weight: 400;
// }

// .comments-container h1 a {
//   font-size: 18px;
//   font-weight: 700;
// }

.comments-list {
  margin-top: 60px;
  position: relative;
}

/**
 * Lineas / Detalles
 -----------------------*/
.comments-list:before {
  content: '';
  width: 2px;
  height: 100%;
  background: #c7cacb;
  position: absolute;
  left: 32px;
  top: 0;
}

.comments-list:after {
  content: '';
  position: absolute;
  background: #c7cacb;
  bottom: 0;
  left: 27px;
  width: 7px;
  height: 7px;
  border: 3px solid #dee1e3;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.reply-list:before, .reply-list:after {display: none;}
.reply-list li:before {
  content: '';
  width: 60px;
  height: 2px;
  background: #c7cacb;
  position: absolute;
  top: 25px;
  left: -55px;
}


.comments-list li {
  margin-bottom: 60px;
  display: block;
  position: relative;
}

.comments-list li:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  width: 0;
}

.reply-list {
  padding-left: 88px;
  clear: both;
  margin-top: 15px;
}
/**
 * Avatar
 ---------------------------*/
.comments-list .comment-avatar {
  display: inline-block;
  margin-right: 19px;
  width: 65px;
  height: 65px;
  position: relative;
  z-index: 99;
  float: left;
  border: 3px solid #FFF;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  overflow: hidden;
}

.comments-list .comment-avatar img {
  width: 100%;
  height: 100%;
}

.reply-list .comment-avatar {
  width: 50px;
  height: 50px;
}

.comment-main-level:after {
  content: '';
  width: 0;
  height: 0;
  display: block;
  clear: both;
}
/**
 * Caja del Comentario
 ---------------------------*/
.comments-list .comment-box {
  display: inline-block;
  width: 94%;
  // float: right;
  position: relative;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
  box-shadow: 0 0px 5px #c8f0ff;
}

.comments-list .comment-box:before, .comments-list .comment-box:after {
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  display: block;
  border-width: 10px 12px 10px 0;
  border-style: solid;
  border-color: transparent #FCFCFC;
  top: 8px;
  left: -11px;
}

.comments-list .comment-box:before {
  border-width: 11px 13px 11px 0;
  border-color: transparent rgba(0,0,0,0.05);
  left: -12px;
}

.reply-list .comment-box {
  width: 610px;
}
.comment-box .comment-head {
  background: #FCFCFC;
  padding: 10px 12px;
  border-bottom: 1px solid #E5E5E5;
  overflow: hidden;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
  background-color: #e3f5fc;
}

.comment-box .comment-head i {
  float: right;
  margin-left: 14px;
  position: relative;
  top: 2px;
  color: #A6A6A6;
  cursor: pointer;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.comment-box .comment-head i:hover {
  color: #03658c;
}

.comment-box .comment-name {
  color: #283035;
  font-size: 14px;
  font-weight: 700;
  float: left;
  margin-right: 10px;
}

.comment-box .comment-name a {
  color: #283035;
}

.comment-box .comment-head span {
  float: left;
  color: #999;
  font-size: 13px;
  position: relative;
  top: 1px;
}

.comment-box .comment-content {
  background: #FFF;
  padding: 12px;
  font-size: 15px;
  color: #595959;
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}

.comment-box .comment-name.by-author, .comment-box .comment-name.by-author a {color: #03658c;}
.comment-box .comment-name:after {
  content: '已咨询';
  background: #03658c;
  color: #FFF;
  font-size: 12px;
  padding: 3px 5px;
  font-weight: 700;
  margin-left: 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

/** =====================
 * Responsive
 ========================*/
@media only screen and (max-width: 766px) {
  .comments-container {
    width: 480px;
  }

  .comments-list .comment-box {
    width: 390px;
  }

  .reply-list .comment-box {
    width: 320px;
  }
}
</style>
